<!DOCTYPE html>
<!--
  This page is displayed when someone clicks a valid 'reset password' link.
  Users should feel free to add to this page (i.e. branding or security widgets)
  but should be sure not to delete any of the form inputs or the javascript from the
  template file. This javascript is what adds the necessary values to authenticate
  this session with Parse.
  The query params 'username' and 'app' hold the friendly names for your current user and
  your app. You should feel free to incorporate their values to make the page more personal.
  If you are missing form parameters in your POST, Parse will navigate back to this page and
  add an 'error' query parameter.
-->
<html>

<head>
<title>Password Reset</title>
</head>

<body>
  <h1>{{appName}}</h1>
  <h1>Reset Your Password</h1>
  <noscript><p>We apologize, but resetting your password requires javascript</p></noscript>
  <p>You can set a new Password for your account: {{username}}</p>
  <br />
  <p>{{error}}</p>  
  <form id='form' action='{{{publicServerUrl}}}/apps/{{{appId}}}/request_password_reset' method='POST'>
    <input name='utf-8' type='hidden' value='✓' />
    <input name="username" type="hidden" id="username" value="{{{username}}}" />
    <input name="token" type="hidden" id="token" value="{{{token}}}" />
    <input name="locale" type="hidden" id="locale" value="{{{locale}}}" />

    <p>New Password</p>
    <input name="new_password" type="password" id="password" />
    <p>Confirm New Password</p>
    <input name="confirm_new_password" type="password" id="password_confirm" />
    <br />
    <p id="password_match_info"></p>
    <br />
    <button id="change_password">Change Password</button>
  </form>

<script>
  window.onload = function() {
    document.getElementById("password").oninput = validatePassword;
    document.getElementById("password_confirm").oninput = validatePassword;
    document.getElementById("change_password").disabled = true;
    
    function validatePassword() {
      var pass2 = document.getElementById("password").value;
      var pass1 = document.getElementById("password_confirm").value;
      if(pass1 !== pass2) {
        if(document.getElementById("password_confirm").value) {
          document.getElementById("change_password").disabled = true;
          document.getElementById("password_match_info").innerHTML = "Must match the previous entry";
        }
      } else {
        document.getElementById("change_password").disabled = false;	 
        document.getElementById("password_match_info").innerHTML = "";
      }
    }
  }
</script>
</body>

</html>